<!DOCTYPE html>
<html>

	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta charset="UTF-8">
		<title></title>
		<script src="../../../../js/lib/iscroll/5.2.0/iscroll.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body {
				padding: 0;
				margin: 0;
			}
			
			.title,.sub-title{
				text-align: center;
				font-size: 40px;
				font-weight: bold;
				height: 2em;
				line-height: 2em;
				background-color: #09a800;
			}
			.sub-title{
				font-size: 16px;
				color: #fff;
				background-color:#35b558;
			}
			.wrapper {
				position: relative;
				z-index: 1;
				width: 500px;
				height: 80px;
				margin: 50px auto;
				border: 1px solid seagreen;
				overflow: hidden;
			}
			
			.list {
				position: absolute;
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			.list-item {
				display: inline-block;
				padding: 15px 0;
				list-style: none;
				width: 200px;
				margin: 10px;
				text-align: center;
				background: rosybrown;
			}
			
			.list-item.active {
				background: red;
			}
		</style>
	</head>

	<body>
		<div class="title">iscroll</div>
		<div class="sub-title">is bad on enulated mobile device of chrome </div>
		<div class="container">
			<div class="wrapper">
				<ul class="list">
					<li class="list-item">第1个</li>
					<li class="list-item">第2个</li>
					<li class="list-item">第3个</li>
					<li class="list-item">第4个</li>
					<li class="list-item">第5个</li>
					<li class="list-item active">第6个</li>
					<li class="list-item">第7个</li>
					<li class="list-item">第8个</li>
					<li class="list-item">第9个</li>
					<li class="list-item">第10个</li>
				</ul>
			</div>
			<script type="text/javascript">
				//禁用全局滑动
				document.addEventListener('touchmove', function(e) {
					e.preventDefault();
				}, false);
				var wrapper = document.querySelector('.wrapper');
				var list = document.querySelector('.list');
				var items = document.querySelectorAll('.list .list-item');
				var width = items.length * (items[0].offsetWidth+26);
				list.style.width=width+'px';
				var myScroll = new IScroll(wrapper, {
					scrollX: true,
					scrollY: false,
					scrollbars:true
				});
				myScroll.scrollToElement('.active', true, true);
			</script>
		</div>
	</body>

</html>